<template>
    <div>
        <a-button type="primary" style="margin-bottom: 8px" @click="handleAdd">新增</a-button>
        <a-table :columns="columns" :data-source="dataSource" bordered>
            <template #bodyCell="{ column, text, record }">
                <template v-if="['amount', 'reward'].includes(column.dataIndex)">
                    <div>
                        <a-input-number :min="0"
                            v-if="editableData[record.id]"
                            v-model:value="editableData[record.id][column.dataIndex]"
                            style="margin: -5px 0;width: 100px;"
                        />
                        <template v-else>
                            {{ text }}
                        </template>
                        元
                    </div>
                </template>
                <template v-else-if="column.dataIndex === '$action'">
                    <a-space>
                        <template v-if="editableData[record.id]">
                            <BTextButton type="primary" @click="save(record.id)">保存</BTextButton>
                            <BTextButton @click="cancel(record.id)">取消</BTextButton>
                        </template>
                        <template v-else>
                            <BTextButton type="primary" @click="edit(record.id)">编辑</BTextButton>
                            <a-popconfirm title="确定删除吗?" @confirm="del(record.id)">
                                <BTextButton type="error">删除</BTextButton>
                            </a-popconfirm>
                        </template>
                    </a-space>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts" setup>
    import { listApi, saveApi, delApi } from '@/api/recharge/Options';
import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import { reactive, ref } from 'vue';

    const columns = [
        {
            title: '支付',
            dataIndex: 'amount',
            align : 'center',
        },
        {
            title: '赠送',
            dataIndex: 'reward',
            align : 'center',
        },
        {
            title: '操作',
            dataIndex: '$action',
            align : 'center',
        },
    ];

    const dataSource = ref<any[]>([]);
    const editableData = reactive<any>({});

    const edit = (id: number) => {

        editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
    };
    const save = async (id: number) => {
        const index =  dataSource.value.findIndex(item => id === item.id)
        const item = editableData[id]
        if(item.amount == '' || item.amount == null) {
            message.error('请填写支付金额')
            return
        }
        let params:any = {
            amount : Number(item.amount),
            reward : Number(item.reward),
            id : item.id
        }

        const res = await saveApi(params)
        if(res.success) {
            if(params.id) {
                dataSource.value[index] = {...item}
            }else {
                dataSource.value[index] = res.data
            }
        }
        
        delete editableData[id];
    };
    const cancel = (id: number) => {
        if(id == 0) {
            const index = dataSource.value.findIndex(item => item.id == 0)
            dataSource.value.splice(index, 1)
        }
        delete editableData[id];
    };

    async function del(id:number) {
        const rs = await delApi(id)
        const index = dataSource.value.findIndex(item => item.id == id)
        dataSource.value.splice(index, 1)
    }

    function handleAdd() {
        if(editableData[0]) return
        let row = {id : 0, amount : '', reward : ''}
        dataSource.value.push(row)
        editableData[0] = {...row}
    }

    listApi().then(res => {
        if(res.data) {
            dataSource.value = res.data
        }
    })
</script>